<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.0/dist/css/datepicker.min.css"> 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>BOOK</title>
    <style>
        body {
            font-family: Arial, 微软雅黑;
        }
        a {
            text-decoration: none;
            color: darkgreen;
        }
        a:hover {
            text-decoration: underline;
            color: darkgreen;
        }
        .text-secondary {
            line-height: 1em;
            font-size: 0.8em;
            border-bottom: 1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="books">
            <table class="table">
                <thead style="background-color: darkgreen;color: white;">
                    <tr>
                        <th>编号</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>出版日期</th>
                    </tr>
                </thead>
                <tbody style="color: #333333;">
                    <tr v-for="(value,index) in book">
                        <td>{{index+1}}</td>
                        <td><a :href="value.jd_link">{{value.title}}</a></td>
                        <td>{{value.author}}</td>
                        <td>{{value.publisher}}</td>
                        <td>{{value.publish_date}}</td>
                    </tr>
                </tbody>
            </table>
            <div class="row g-2 gy-md-3">
                <div class="border p-2 col-xl-4 col-md-6" style="height: 100%;" v-for="value in book">
                    <div class="row">
                        <div class="col-4">
                            <a :href="value.jd_link"><img :src="value.img_url" alt="1" height="60%" width="100%"></a>
                        </div>
                        <div class="col-8">
                            <p class="fs-5">{{value.title}}</p>
                            <p class="text-secondary">{{value.author}}</p>
                            <p class="text-secondary">出版社：{{value.publisher}}</p>
                            <p class="text-secondary">出版日期：{{value.publish_date}}</p>
                            <p class="text-secondary">定价：<span style="color: red;">￥{{value.price}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var list = new Vue({
            el: "#books",
            data: {
                book: [{
                    "title": "文城",
                    "author": "余华 著",
                    "publisher": "北京十月文艺出版社",
                    "price": "59",
                    "img_url": "https://img10.360buyimg.com/n3/jfs/t1/158132/14/8162/103014/60330ee3E467c5968/66702a6f6e3d7bf4.jpg",
                    "publish_date": "3/1/2021",
                    "jd_link": "https://item.jd.com/13103720.html"
                },
                {
                    "title": "亲爱的小孩，和世界一起长大",
                    "author": "乌恩，翟芮 著",
                    "publisher": "北京联合出版公司",
                    "price": "69",
                    "img_url": "https://img14.360buyimg.com/n0/jfs/t1/125979/40/11543/276765/5f4efaadE00034393/0a34e814cfc4928a.jpg",
                    "publish_date": "9/1/2020",
                    "jd_link": "https://item.jd.com/12715197.html"
                },
                {
                    "title": "平凡的世界",
                    "author": "路遥 著",
                    "publisher": "北京十月文艺出版社",
                    "price": "108",
                    "img_url": "https://img14.360buyimg.com/n0/jfs/t1/144519/5/8298/235760/5f5f122eE26ad13f3/0ff8230c79cbd6e3.jpg",
                    "publish_date": "5/1/2017",
                    "jd_link": "https://item.jd.com/12090377.html"
                },
                {
                    "title": "百年孤独",
                    "author": "[哥伦比亚] 加西亚·马尔克斯 著，范晔 译",
                    "publisher": "南海出版公司",
                    "price": "39.5",
                    "img_url": "https://img14.360buyimg.com/n0/g13/M01/06/1A/rBEhUlNQteEIAAAAAAtdoWkefkwAAMC2QA28NIAC125952.jpg",
                    "publish_date": "6/1/2011",
                    "jd_link": "https://item.jd.com/10658646.html"
                },
                {
                    "title": "红岩",
                    "author": "罗广斌，杨益言 著",
                    "publisher": "中国青年出版社",
                    "price": "36",
                    "img_url": "https://img14.360buyimg.com/n0/jfs/t8044/203/1955340487/93895/1dd45327/59c1d9dfNd3774581.jpg",
                    "publish_date": "9/1/2017",
                    "jd_link": "https://item.jd.com/12192773.html"
                }]
            }
        });
    </script>
</body>
</html>
